summaryrefslogtreecommitdiffstats
path: root/_sass
diff options
context:
space:
mode:
authorSimone Bortolin <simonebortolin@users.noreply.github.com>2022-08-05 06:59:56 +0200
committerSimone Bortolin <simonebortolin@users.noreply.github.com>2022-12-19 22:55:58 +0100
commit04e593565d0f69ec54923fb66a167eecc48f6e50 (patch)
treea770cf7b174d3ba9c235d412b0449a40481394af /_sass
parentadd images (diff)
downloadhack-gpon.github.io-04e593565d0f69ec54923fb66a167eecc48f6e50.tar
hack-gpon.github.io-04e593565d0f69ec54923fb66a167eecc48f6e50.tar.gz
hack-gpon.github.io-04e593565d0f69ec54923fb66a167eecc48f6e50.tar.bz2
hack-gpon.github.io-04e593565d0f69ec54923fb66a167eecc48f6e50.tar.lz
hack-gpon.github.io-04e593565d0f69ec54923fb66a167eecc48f6e50.tar.xz
hack-gpon.github.io-04e593565d0f69ec54923fb66a167eecc48f6e50.tar.zst
hack-gpon.github.io-04e593565d0f69ec54923fb66a167eecc48f6e50.zip
Diffstat (limited to '_sass')
-rw-r--r--_sass/color_schemes/light.scss2
-rw-r--r--_sass/custom/custom.scss252
2 files changed, 243 insertions, 11 deletions
diff --git a/_sass/color_schemes/light.scss b/_sass/color_schemes/light.scss
new file mode 100644
index 0000000..7526fcd
--- /dev/null
+++ b/_sass/color_schemes/light.scss
@@ -0,0 +1,2 @@
+$link-color: $blue-000;
+$btn-primary-color: $blue-200; \ No newline at end of file
diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss
index fb31338..5ee5683 100644
--- a/_sass/custom/custom.scss
+++ b/_sass/custom/custom.scss
@@ -1,19 +1,249 @@
-.github-edit {
- color: $nav-child-link-color;
-
- &:hover {
- color: $link-color;
+$purple-400: #2A1264 !default;
+$blue-400: #122664 !default;
+$green-400: #025341 !default;
+$yellow-400: #AD8305 !default;
+$red-400: #A62323 !default;
+
+.page-header {
+
+ .github-edit {
+ color: $nav-child-link-color;
+ float: right;
+
+ &:hover {
+ color: $link-color;
+
+ svg {
+ fill: $link-color ;
+ }
+ }
svg {
- fill: $link-color ;
+ display: inline;
+ vertical-align: top;
+ width: 1.5 * $spacing-unit;
+ height: 1.5 * $spacing-unit;
+ fill: $nav-child-link-color;
+ }
+ }
+
+ h1 {
+ margin-right: 3.5 * $spacing-unit;
+ }
+}
+
+
+.avatar {
+ border-radius: 50%;
+ width: 1.5 * $spacing-unit;
+ height: 1.5 * $spacing-unit;
+}
+
+
+
+ul.metadata {
+ flex-wrap: wrap;
+ list-style: none;
+ display: flex;
+ margin: 0!important;
+ padding: 0.125rem 0 0!important;
+ >li{
+ flex-basis: auto;
+ align-items: center;
+ list-style: none;
+ display: flex;
+
+ &:not(:last-of-type):not(:only-of-type)::after {
+ content: "•";
+ padding-left: 5px;
+ padding-right: 5px;
+ color: $grey-dk-000;
+ }
+
+ &::before {
+ content: "";
+ }
+ }
+}
+
+[data-toogle] {
+
+ cursor: pointer;
+}
+
+.modal {
+ display: none;
+ position: fixed;
+ z-index: 100;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ background-color: rgba(0,0,0,0.4);
+
+ .modal-content {
+ border: $border $border-color;
+ position: relative;
+ background-color: $body-background-color;
+ width: min(500px, calc(100vw - 40px));
+ padding: 0;
+ margin: 40px auto;
+ animation-name: animatetop;
+ animation-duration: 0.4s;
+
+
+
+
+ .modal-header {
+ padding: 2px $spacing-unit;
+ margin-left: 1.5 * $spacing-unit;
+
+ h2, .close {
+ font-size: 1.5 * $spacing-unit !important;
+ margin-top: 1.5 * $spacing-unit;
+ margin-bottom: 1.5 * $spacing-unit;
+ line-height: 1;
+ }
+ h2 {
+ margin-right: 1.5 * $spacing-unit;
+ }
+
+ .close {
+ color: $nav-child-link-color;
+ float: right;
+ font-weight: bold;
+ cursor: pointer;
+
+ &:hover {
+ color: $link-color;
+ }
+ }
+ }
+
+ div.modal-body {padding: 2px $spacing-unit;}
+
+ .modal-footer {
+ padding: 2px $spacing-unit;
+ color: $body-text-color;
+ }
+
+ ul.modal-body {
+ padding: 0;
+ margin: 0;
+
+ >li{
+
+ padding: 10px;
+ margin: -1px;
+ border-width: 1px 1px 1px 3px;
+ border-style: solid;
+ border-color: $border-color;
+
+ &:hover {
+ border-left-color: $link-color;
+ }
+
+ &::before {
+ content: '';
+ }
+
+
+ >a {
+ color: $body-text-color;
+ text-decoration: none;
+ border: 0;
+ background: none;
+ display: flex;
+ align-items: center;
+
+ &:hover {
+ color: $link-color;
+ }
+
+ img {
+ margin-right: 10px;
+ }
+ }
+
+ }
}
}
+}
+
+/* Add Animation */
+@keyframes animatetop {
+ from {top: -300px; opacity: 0}
+ to {top: 0; opacity: 1}
+}
+
+.alert {
+ padding: $sp-3;
+ margin-bottom: $sp-3;
+ overflow: auto;
+ border: $border $border-color;
+ border-radius: $border-radius;
+
svg {
- display: inline;
- vertical-align: top;
- width: 1.5rem;
- height: 1.5rem;
- fill: $nav-child-link-color;
+ height: $spacing-unit;
+ margin-right: 0.5 * $spacing-unit;
+ width: $spacing-unit;
+ }
+
+ &.alert-warning {
+ background-color: $yellow-000;
+ color: $yellow-400;
+ border-color: $yellow-100;
+ svg {
+ fill: $yellow-400;
+ }
+ }
+
+ &.alert-danger {
+ background-color: $red-000;
+ color: $red-400;
+ border-color: $red-100;
+ svg {
+ fill: $red-400;
+ }
+ }
+
+ &.alert-info {
+ background-color: $blue-000;
+ color: $blue-400;
+ border-color: $blue-100;
+ svg {
+ fill: $blue-400;
+ }
+ }
+
+ &.alert-success {
+ background-color: $green-000;
+ color: $green-400;
+ border-color: $green-100;
+ svg {
+ fill: $green-400;
+ }
+ }
+}
+
+.btn-yellow {
+ @include btn-color($white, $yellow-100);
+}
+
+figure {
+ border: $border $border-color;
+ border-radius: $border-radius;
+ display: table;
+
+ figcaption {
+ background-color: $code-background-color;
+ padding: 8px;
+ }
+ img{
+ vertical-align: middle;
+ border-top-left-radius: $border-radius;
+ border-top-right-radius: $border-radius;
}
} \ No newline at end of file